<template>
  <div class="son">
    <!-- 旋转式api做法，兼容vue2语法 -->
        <!-- <p>{{ info }}</p> -->

        <h1>我是子组件:曹植</h1>
       <p>{{props.info}}</p>
       <p>{{props.money}}</p> 
      <!--props 在模板可以省略前面的名字，js里不能省--->
       <p>{{info}}</p>
       <p>{{money}}</p>
       <button @click="updateProps">修改props数据</button>
  </div>
</template>

 <script setup lang="ts">
//需要使用到defineProps方法去接受父组件传递过来的数据
//defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(['info','money']); //数组|对象写法都可以
//按钮点击的回调
const updateProps = ()=>{
  // props.money+=10;  //props:只读的
  console.log(props.info)
}
</script> 


<!-- 旋转式api做法，兼容vue2语法 -->
<!-- <script>
  export default {
    props:['info','money']
  }
</script> -->

<style scoped>
.son{
  width: 400px;
  height: 200px;
  background: hotpink;
}
</style>